<style type="text/css">
  ul{ list-style-type:none;border:solid 1px black; width:100px; }
  li{ padding:5px;}
  
    .hv{background:blue;}
    #m{display:none; position:absolute;}
</style>
<script type="text/javascript">
    function addClass(obj,name){
        obj.className = name;
    }
    function removeClass(obj,name){
        obj.className = "";
    }
    function showmenu(obj,id){
        var m = document.getElementById(id);
        obj.style.postion=absolute;
        m.left = obj.style.left + 'px';
        m.top = obj.style.top + obj.style.height + 'px';
        m.style.display="block";
    }
</script>
<span onclick="showmenu(this,'m');">shoaisjd</span>
<ul id="m">
<li onmouseover="addClass(this,'hv');" onmouseout="removeClass(this,'hv');"><a href="#">file</a></li>
<li onmouseover="addClass(this,'hv');" onmouseout="removeClass(this,'hv');"><a href="#">file</a></li>
<li onmouseover="addClass(this,'hv');" onmouseout="removeClass(this,'hv');"><a href="#">file</a></li>
<li onmouseover="addClass(this,'hv');" onmouseout="removeClass(this,'hv');"><a href="#">file</a></li>

</ul>